<template>
    <div class="container">
    <n-flex vertical style="margin-left: 100%;">
        <n-flex justify="center">
            <n-gradient-text type="success">
                这是一个测试的标题
            </n-gradient-text>
        </n-flex>
        <n-divider />
        <n-form 
            ref="formRef"
            :mode="mode"
            :rules="rules"
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
            size="medium"
            :style="{maxWidth:'640px'}"
        >
            <n-form-item label="用户名:" path="usernameValue">
                <n-input v-model:value="mode.usernameValue" placeholder="请输入用户名"/>
            </n-form-item>
            <n-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;码:" path="passValue">
                <n-input type="password" v-model:value="mode.passValue" 
                    placeholder="请输入密码"
                    show-password-on="click"/>
            </n-form-item>
        </n-form>
        <n-flex justify="center">
            <n-button type="primary" @click="login" style="width: 100px;">验&nbsp;&nbsp;证</n-button>
        </n-flex>
    </n-flex>
</div>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter} from 'vue-router';
import { register } from '@tauri-apps/plugin-global-shortcut';
import { TrayIcon } from '@tauri-apps/api/tray';
import {Menu, MenuItem} from '@tauri-apps/api/menu';

const router = useRouter();

const formRef = ref(null);
const mode = ref({
    usernameValue: null,
    passValue: null
});

const rules = {
    usernameValue:{
        require: true, trigger:['blur','input'],message:'请输入用户名'
    },
    passValue:{
        require: true, trigger:['blur','input'],message:'请输入密码'
    }
}

const trayOptions = {
    tooltip: '工具',
    
};
async function initTray(){

    
    const mi = MenuItem.new({
        text: '显示',
        action:(id)=>{
            console.log(id);
        }
    });
    const menu = Menu.new({
         id:'test',
         items:[mi]
    });
    const tray = await TrayIcon.new({
        tooltip: '工具222',
        menuOnLeftClick: false,
        menu: menu,
        action:(e)=>{
            console.log(e);
        }
    });
    
}

//initTray();
onMounted(async ()=>{
    await register('CommandOrControl+Shift+C', () => {
        console.log('Shortcut triggered');
    });
})

function login(){
    router.push('/main');
}
</script>
<style scoped>
.n-gradient-text {
  font-size: 36px;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
</style>